<template>
	<view >
		<zero-loading v-if="loading" :mask="true" type="pulse" style="z-index: 999;"></zero-loading>

		
		
		<view class="miniBox" v-if="buttonFlag" @click="showBigBox">
			<image style="width: 50rpx;height: 90rpx; border-radius: 15rpx 0 0 15rpx;"
				src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/zuojiantou.png" mode=""></image>
		</view>
		<view class="BigBox" v-else>
			<view style="display: flex;box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;">
				<image @click.stop="showMini"
					style="width: 40rpx;height: 90rpx; border-radius: 15rpx 0 0 15rpx; position: absolute; left: -13%; z-index: 999;"
					src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/youjiantou.png" mode=""></image>
				<view style="height: 90rpx; width: 150rpx; background-color: #fff;">
					<view v-if="timeShow" style="margin-left: 50rpx; margin-top: 25rpx; color: #aaa;">{{countDown}}s
					</view>
					<image v-else style="width: 70rpx;height: 70rpx; margin-left: 40rpx; margin-top: 10rpx;"
						@click="syncCheck" src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/shuaxin.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<view>
			<view style="margin-top:50rpx;">
				
				<view class="dormitoryTitle">
					<view v-for="(item,index) in dormitoryTtileArr" :key="item.id"
						@click="changeTitleFun(item,dormitoryTtileArr)">
						<span>{{item.title}}</span>
						<view class="dormitoryHealthLine" v-show="item.isShow"></view>
					</view>
				</view>
				<view class="classAttendanceWrap">
					<view
						:class="[item.status=='已点'?'classAttendence0':(item.status=='未点'?'classAttendence1':'classAttendence2')]"
						v-for="(item,index) in classArr" :key="index" @click="manageSkip(item)">
						<view class="classAttendenceFont">
							<view style="font-size:40rpx ;">{{item.dormitoryNo}}</view>
							<view v-if="item.status=='差'">
								<view v-if="item.absence!=0" style="letter-spacing: 5rpx;">
									缺勤{{item.absence}}人
								</view>
								
							</view>
							<view v-else>{{item.status}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="logoSty" style="margin-bottom: 150rpx;"></view>
		</view>
		
		<my-bottom :bottomArr="attBottoms" :bottomName="bottomName"></my-bottom>
	</view>
</template>

<script>
	import bottomCom from '../component/bottom.vue'
	import dormitoryTitle from '../component/dormitoryTtile.vue'
	import dormitoryCheck from "@/api/modules/dormitoryCheck.js"
	export default {
		name: 'managementIndex',
		data() {
			return {
				loading: false,
				buttonFlag: true,
				userInfo: '',
				bottomName: 'clear',
				dormitoryTtileArr: [{
						id: 2,
						title: '二楼',
						isShow: true,
					},
					{
						id: 3,
						title: '三楼',
						isShow: false,
					},
					{
						id: 4,
						title: '四楼',
						isShoe: false,
					},
					{
						id: 5,
						title: '五楼',
						isShow: false,
					},
					{
						id: 6,
						title: '六楼',
						isShow: false,
					},
				],
				topName: '宿舍考勤',
				userName: '启蒙星',
				classArr: [{
					class: "202",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "203",
					status: "未点",
					principle: '',
					arrived: "",
				}, {
					class: "204",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "205",
					status: "差",
					principle: '违纪1人',
					arrived: "未到1人",
				}, {
					class: "206",
					status: "已点",
					principle: '',
					arrived: "",
				}, {
					class: "207",
					status: "已点",
					principle: '',
					arrived: "",
				}, ],
				attBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/classManagement/classManagementDormitoryAttendance?buildingNo=畔湖苑&type=考勤'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageDormitoryHealth?buildingNo=畔湖苑&type=卫生'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/dormitoryMaintenanceList?buildingNo=畔湖苑&type=报修'
					}
				],
				storey: "二楼",
				buildingNo: '',
				topTitle: "考勤",
				botArr: [],
				buildNo: "",
				steoryNo: "",
				steoryNo: 2,
				countDown: 0,
				timeShow: false,
				timer: null,
			}
		},
		mounted() {
			// this.listDorManualAttence(this.storey)
			this.getAppDorListByStorey(this.storey);
			// console.log(JSON.stringify(this.attBottoms))
			// this.botArr = JSON.stringify(this.attBottoms)
		},
		components: {
			bottomCom,
			dormitoryTitle
		},
		onLoad(options) {
			// this.getAppDorListByStorey(this.storey);
			this.buildingNo = options.buildingNo
			this.topTitle = options.type
			this.userInfo = uni.getStorageSync("userRole");
			dormitoryCheck.findDormBuilding().then(res => {
				res.data.forEach(item => {
					if (item.dictLabel == this.buildingNo) {
						this.buildNo = item.dictValue
					}
				})
			})
			if (uni.getStorageSync(this.buildingNo + this.steoryNo)) {
				this.countDown = 30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
					1000)
				this.timer = setInterval(() => {
					this.countDown--
					if (this.countDown <= 0) {
						this.timeShow = false
					}
				}, 1000)
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			changeTitleFun(item, arr) {
				this.steoryNo = item.id
				for (let i in arr) {
					if (item.title != arr[i].title) {
						arr[i].isShow = false
					}
				}
				item.isShow = true
				this.storey = item.title
				this.getAppDorListByStorey(this.storey)

				// --------------------------------------------------------------------------------------
				if (!uni.getStorageSync(this.buildingNo + this.steoryNo)) {
					console.log(111)
					this.buttonFlag = true
					this.timeShow = false
				} else if (uni.getStorageSync(this.buildingNo + this.steoryNo)) {
					this.buttonFlag = false
					if (this.countDown > 0) {
						if (30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
								1000) < 0) {
							this.timeShow = false
							return
						}
						this.countDown = 30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
							1000)
						this.timeShow = true
					} else if (this.countDown <= 0) {
						this.countDown = 30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
							1000)
						if (this.countDown > 0) {
							this.timeShow = true
						} else if (this.countDown < 0) {
							this.timeShow = false
						}
					}
				}
			},


			syncCheck() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null;
				}
				uni.setStorageSync(this.buildingNo + this.steoryNo, Date.now())
				this.countDown = 30
				this.timeShow = !this.timeShow
				this.timer = setInterval(() => {
					this.countDown--
					if (this.countDown <= 0) {
						this.timeShow = false
					}
				}, 1000)

				dormitoryCheck.publishSyncSdAttence({
					buildingNo: this.buildNo,
					storey: this.steoryNo
				}).then(res => {
					if (res.code == 200) {
						this.loading = !this.loading
						setTimeout(() => {
							this.getAppDorListByStorey(this.storey);
							this.loading = !this.loading
							uni.showToast({
								title: '同步考勤成功',
								duration: 2000
							})
						}, 3000)
					}
				}).catch(error => {
					console.log(error)
					uni.showToast({
						title: error.data.message,
						duration: 2000
					})
				})
			},
			showMini() {
				this.buttonFlag = true
			},
			showBigBox() {
				this.buttonFlag = false
				if (uni.getStorageSync(this.buildingNo + this.steoryNo)) {
					this.buttonFlag = false
					console.log(222)
					if (this.countDown > 0) {
						console.log(333)
						if (30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
								1000) < 0) {
							this.timeShow = false
							return
						}
						this.countDown = 30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
							1000)
						this.timeShow = true
					} else if (this.countDown <= 0) {
						console.log(444)
						this.countDown = 30 - parseInt((Date.now() - uni.getStorageSync(this.buildingNo + this.steoryNo)) /
							1000)
						if (this.countDown > 0) {
							this.timeShow = true
						} else if (this.countDown < 0) {
							this.timeShow = false
						}
					}
				}
			},

			manageSkip(item) {
				uni.navigateTo({
					url: `/pages/classManagement/classManageDormitoryAttendanceDetail?buildingNo=${this.buildingNo}&type=考勤&dormitoryId=${item.bdormitoryId}&dormitoryNo=${item.dormitoryNo}`
				})
			},
			getAppDorListByStorey(storey) {
				this.$api.dormitory.getAppDorListByStorey(this.buildingNo, storey).then(res => {
					this.classArr = res.data
					this.classArr.forEach((item, index) => {
						item.status = "未点"
					})
					this.listDorManualAttence(this.storey)
				})
			},
			listDorManualAttence(storey) {
				this.$api.dormitory.listDorManualAttence(this.buildingNo, storey, this.$date).then(res => {
					// this.$api.dormitory.listDorManualAttence(this.buildingNo, storey, "2023-09-26").then(res => {
					if (res.data.length > 0) {
						var dataList = res.data
						for (var i = 0; i < dataList.length; i++) {
							for (var j = 0; j < this.classArr.length; j++) {
								if (dataList[i].bdormitoryId == this.classArr[j].bdormitoryId) {
									// console.log(dataList[i])
									this.$forceUpdate()
									this.classArr[j] = dataList[i]
									if (this.classArr[j].absence != 0) {
										this.classArr[j].status = "差"
									} else if ((this.classArr[j].leaveCount + this.classArr[j].normal) ==
										this
										.classArr[j].total) {
										this.classArr[j].status = '已点'
									} else if ((this.classArr[j].leaveCount + this.classArr[j].normal) <
										this
										.classArr[j].total && this.classArr[j].normal > 0) {
										this.classArr[j].absence = this.classArr[j].total - (this.classArr[
												j]
											.leaveCount + this.classArr[j].normal)
										if (this.classArr[j].absence != 0) {
											this.classArr[j].status = "差"
										}
									} else {
										this.classArr[j].status = "未点"
									}
								}
							}
						}

					}
				})
			},
		}
	}
</script>

<style>
	.dormitoryHealthLine {
		width: 100rpx;
		height: 8rpx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -10rpx;
	}

	.dormitoryTitle {
		color: #0000FF;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		font-size: 42rpx;
	}

	.classAttendenceFont {
		color: white;
		text-align: center;
		margin-top: 40rpx;

	}

	.classAttendanceWrap {
		width: 700rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}

	.classAttendence0 {
		width: 23%;
		height: 160rpx;
		background-image: url("https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/001.png");
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 160rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/004.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.classAttendence2 {
		width: 23%;
		height: 160rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-010.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.manageSearch {
		width: 650rpx;
		height: 50rpx;
		border: solid 2px #C0C0C0;
		border-radius: 20rpx;
		margin: auto;
		text-align: right;
		padding-right: 10rpx;
		font-size: 24rpx;
	}

	.indexContent {
		height: unset !important;
	}

	.miniBox {
		position: fixed;
		right: 0;
		z-index: 999999;
		top: 40%;
	}

	.BigBox {
		position: fixed;
		right: -3%;
		z-index: 9;
		top: 40%;
	}
</style>